<template>
    <div class="account">
<!--        <div class="acea-row row-between-wrapper">-->
<!--            <div class="search acea-row row-middle">-->
<!--                <span class="iconfont icon-search_light ml10"></span>-->
<!--                <input class="ml10" style="flex: 1;" type="text" placeholder="请输入搜索名字">-->
<!--            </div>-->
<!--            <div class="btn">搜素</div>-->
<!--        </div>-->
        <div class="acea-row row-right mt20">
            <div class="acea-row row-middle row-center add" @click.stop="add()">
                <span class="iconfont icon-tianjia"></span>
                <span style="margin-left: 5px">添加</span>
            </div>
        </div>

        <div class="list">
            <div class="item acea-row row-between-wrapper" v-for="(item,index) in list" :key="index">
                <div class="acea-row row-middle">
                    <div class="avatar">
                        <img class="imgwh" :src="item.avatar" alt="">
                    </div>
                    <div class="acea-row row-column row-between ml20 font14">
                        <div>名称： <span class="bold">{{ item.staff_name }}</span> </div>
                        <div class="mt20">累计接单： <span class="bold">{{ item.max_count }}</span> </div>
                    </div>
                    <div class="ml150 font14">
                        <div>联系人： <span class="bold">{{ item.nickname }}</span> </div>
                        <div class="mt20">联系方式： <span class="bold">{{ item.phone }}</span> </div>
                    </div>
                </div>
                <div class="acea-row row-middle">
                    <div class="mr50" @click.stop="statusClick(item.id)">
                        <i-switch v-model="item.status" size="large" @on-change="change" true-value="1" false-value="0">
                            <template #open>
                                <span>启用</span>
                            </template>
                            <template #close>
                                <span>禁用</span>
                            </template>
                        </i-switch>
                    </div>
                    <div class="del-btn" @click.stop="selPerson(item)">删除</div>
                    <div class="edit-btn" @click.stop="editPerson(item)">编辑</div>
                </div>
            </div>
        </div>

        <Col class="demo-spin-col" span="8" v-if="loading">
            <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>Loading</div>
            </Spin>
        </Col>
        <div class="acea-row row-right page">
            <Page
                    :total="total"
                    :current="page"
                    show-elevator
                    show-total
                    @on-change="pageChange"
                    :page-size="limit"
            />
        </div>

        <Modal v-model="modal1" width="600" :footer-hide="true" class-name="vertical-center-modal">
            <div style="text-align:center;" class="mt20">
                <div class="acea-row row-middle">
                    <div class="name-box">照片</div>
                    <div class="upload" v-viewer @click="uploadimg">
                        <img class="imgwh" :src="from.avatar" alt="">
                    </div>
                </div>
                <div class="acea-row row-middle mt20">
                    <div class="name-box">名称</div>
                    <Input v-model="from.staff_name" size="large" placeholder="请输入名称~" style="width: 400px" />
                </div>
                <div class="acea-row row-middle mt20">
                    <div class="name-box">员工编号</div>
                    <Input v-model="from.uid" size="large" placeholder="员工编号~" style="width: 400px" />
                </div>
                <div class="acea-row row-middle mt20">
                    <div class="name-box">联系电话</div>
                    <Input v-model="from.phone" size="large" placeholder="请输入联系号码~" style="width: 400px" />
                </div>
                <div class="submit" @click.stop="submit">提交保存</div>
                <div class="delete" @click="delected(from.id)" v-if="type == 'edit'">删除员工</div>
            </div>
        </Modal>

        <Modal
                v-model="delmodel"
                title="是否确认删除用户"
                @on-ok="del_user"
                @on-cancel="cancel">
            <p>删除后将不能再指派,请你确认是否删除</p>
        </Modal>

        <Modal
                v-model="modalPic"
                width="1024px"
                scrollable
                footer-hide
                closable
                title="上传商品图"
                :mask-closable="false"
                :z-index="999"
        >
            <uploadPictures
                    :isChoice="isChoice"
                    @getPic="getPic"
                    @getPicD="getPicD"
                    :gridBtn="gridBtn"
                    :gridPic="gridPic"
                    v-if="modalPic"
            ></uploadPictures>
        </Modal>


    </div>
</template>

<script>
    import uploadPictures from '@/components/uploadPictures'
    import { getCookies } from "@/libs/util";
    import {
        setStaff
    } from '@/api/user'
    import {
        storeStaff,
        editstoreStaff,
        delstoreStaff
    } from '@/api/user'
    export default {
        name: "List",
        components:{
            uploadPictures
        },
        data(){
            return {
                delmodel:false,
                from:{
                    avatar:'',
                    id:'',
                    uid:'',
                    store_id:1,
                    staff_name:'',
                    phone:'',
                },
                page:1,
                limit:10,
                total:0,
                loading:false,
                modal1: false,
                list:[],
                type:'',

                modalPic: false,
                isChoice: "dan",
                gridPic: {
                    xl: 6,
                    lg: 8,
                    md: 12,
                    sm: 12,
                    xs: 12,
                },
                gridBtn: {
                    xl: 4,
                    lg: 8,
                    md: 8,
                    sm: 8,
                    xs: 8,
                },
                statusId:'',
            }
        },
        mounted() {
            this.getlist();
        },
        methods:{
            statusClick(id){
                this.statusId = id;
            },
            change (status) {
                console.log(status)
                setTimeout(()=>{
                    setStaff(this.statusId,status).then(res=>{
                        this.$Message.success(res.msg);
                        this.getlist();
                    }).catch(err=>{
                        this.$Message.error( err.msg );
                    })
                },200)
            },
            uploadimg(){
                this.modalPic = !this.modalPic;
            },
            // 获取单张图片信息
            getPic(pc) {
                this.from.avatar = pc.att_dir;
                this.modalPic = false;
            },
            // 获取多张图信息
            getPicD(pc) {
                // this.images = pc;
                // this.images.map((item) => {
                //     this.formValidate.slider_image.push(item.att_dir);
                //     this.formValidate.slider_image = this.formValidate.slider_image.splice(
                //         0,
                //         10
                //     );
                // });
                // this.oneFormValidate[0].pic = this.formValidate.slider_image[0];
                // this.modalPic = false;
            },
            add(){
                this.from = [];
                this.type = 'add';
                this.modal1 = !this.modal1
            },
            submit(){
                let that = this;
                editstoreStaff(that.from.id||0,that.from).then(res=>{
                    this.modal1 = !this.modal1;
                    this.$Message.success(res.msg);
                    this.getlist();
                }).catch(err=>{
                    this.$Message.error( err.msg );
                })
            },
            getlist(){
                this.loading = true;
                storeStaff({ page: this.page , limit: this.limit }).then(res=>{
                    setTimeout(()=>{
                        this.loading = false;
                        this.total = res.data.count;
                        this.list = res.data.list;
                    },1000)
                })
            },
            editPerson(item){
                this.type = 'edit';
                this.modal1 = !this.modal1;
                this.from.avatar = item.avatar;
                this.from.id = item.id;
                this.from.uid = item.uid;
                this.from.store_id = item.store_id;
                this.from.staff_name = item.staff_name;
                this.from.phone = item.phone;
            },
            selPerson(item){
                this.delmodel = !this.delmodel;
                this.from.id = item.id;
            },
            pageChange(index){
                this.loading = true;
                this.page = index;
                this.list = [];
                this.getlist();
            },
            delected(){
                this.delmodel = !this.delmodel;
                this.modal1 = !this.modal1
            },
            del_user(){
                delstoreStaff(this.from.id).then(res=>{
                    this.$Message.success(res.msg);
                    this.getlist();
                }).catch(err=>{
                    this.$Message.error( err.msg );
                })
            },
            cancel(){

            },

        }
    }
</script>

<style scoped lang="less">
    .delete{
        width: 500px;
        line-height: 50px;
        border-radius: 30px;
        text-align: center;
        color: #EB2D2D;
        background: rgba(235, 45, 45, 0.2);
        font-size: 16px;
        margin: 0 auto;
    }
    .submit{
        width: 500px;
        line-height: 50px;
        border-radius: 30px;
        text-align: center;
        color: #3C6CFE;
        background: rgba(60, 108, 254, 0.2);
        font-size: 16px;
        margin: 30px auto;
    }
    .name-box{
        width: 100px;
        text-align: right;
        color: #333333;
        font-size: 16px;
        margin-right: 20px;
    }
    .upload{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #999999;
        overflow: hidden;
    }
    .upload-btn{
        width: 100px;
        line-height: 30px;
        text-align: center;
        color: #3C6CFE;
        font-size: 14px;
        background-color: #E8EEFF;
        border-radius: 20px;
        margin-left: 20px;
    }
    .account{

        .search{
            flex: 1;
            height: 32px;
            border-radius: 6px;
            border: 1px solid #666;
        }
        .btn{
            width: 80px;
            height: 32px;
            background-color: #2d8cf0;
            text-align: center;
            line-height: 32px;
            color: #FFFFFF;
            border-radius: 6px;
            margin-left: 20px;
        }
        .add{
            width: 80px;
            height: 32px;
            text-align: center;
            border-radius: 16px;
            background-color: #3C6CFE;
            color: #FFFFFF;
            font-size: 12px;
        }
        .list{
            margin-top: 20px;

            .item{
                width: 100%;
                /*height: 80px;*/
                border-radius: 6px;
                box-shadow: 0 0 5px #999;
                margin-bottom: 20px;
                padding: 20px;

                .avatar{
                    width: 80px;
                    height: 80px;
                    border-radius: 5px;
                    background-color: #999999;
                    overflow: hidden;
                }

                .del-btn{
                    width: 100px;
                    height: 40px;
                    border-radius: 20px;
                    border: 1px solid #FE4F3C;
                    color: #FE4F3C;
                    text-align: center;
                    line-height: 40px;
                    font-size: 16px;
                    letter-spacing: 4px;
                }
                .edit-btn{
                    width: 100px;
                    height: 40px;
                    border-radius: 20px;
                    border: 1px solid #3C6CFE;
                    color: #3C6CFE;
                    text-align: center;
                    line-height: 40px;
                    font-size: 16px;
                    letter-spacing: 4px;
                    margin-left: 50px;
                }

            }

        }

    }
</style>
